<template>
  <q-dialog v-model="dialog" persistent>
    <div class="full-width q-pa-md back-box">
      <div class="center" style="margin-top: -65px">
        <img src="~/assets/images/info/dialog-top.png" alt="dialog" style="width: 180px; height: 133.2px" />
      </div>

      <div style="font-size: 18px; letter-spacing: 1px" class="q-mt-lg text-center text-weight-bold">
        即将激活<span style="color: #2c70fc">最高20万</span>额度
      </div>

      <div class="text-center q-mt-sm" style="color: #666666; font-size: 14px">
        申请流程简单，<span style="color: #fe6c0b">最快5分钟</span>放款
      </div>

      <div class="flex items-stretch q-mt-lg justify-between">
        <q-btn
          color="grey-7"
          style="width: 48%; font-size: 16px; font-weight: bold"
          label="暂时离开"
          @click="submit"
          outline
          rounded
        />
        <q-btn class="submit-btn" style="width: 48%" @click="close" rounded unelevated padding="sm">
          <div class="">
            继续申请
            <div class="pointer">
              <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
              <!-- <img src="~/assets/images/public/pointer.gif" style="display: block; width: 60px" /> -->
            </div>
          </div>
        </q-btn>
      </div>
    </div>
  </q-dialog>
  <BackDialog 
    ref="BackDialogRef" 
    :is-customize-goto="isCustomizeGoto" 
    :prod-img="prodImg" 
    :prod-name="prodName"
    :back-style="backStyle"
    @goto="subGoto"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Show } from './BackInfoDialog';
import { useWxHook } from 'src/hooks/wx_hooks';
import { useRoute, useRouter } from 'vue-router';
import BackDialog from './BackDialog.vue';
import { BackDialogInstance } from './BackDialog';
import wxImg from 'src/assets/images/home/wx-logo.png'
const props = defineProps({
  prodName: {
    default: '微信',
    type: String
  },
  prodImg: {
    default: wxImg,
    type: String
  },
  isCustomizeGoto:{
    default: false,
    type: Boolean
  },
  backStyle: {
    default: 0,
    type: Number
  }
})
const emits = defineEmits(['next', 'goto'])

const dialog = ref(false);
const loading = ref(false);
const BackDialogRef = ref<BackDialogInstance>()

const router = useRouter();
const route = useRoute();

const show: Show = async () => {
  dialog.value = true;
};
const subGoto = () => {
  emits('goto')
}
const submit = () => {
  close()
  BackDialogRef.value?.show()
};

const close = () => {
  dialog.value = false;
  emits('next')
};
defineExpose({ show });
</script>

<style lang="scss" scoped>
.back-box {
  background-color: #fff;
  background-image: url(src/assets/images/public/dialog-top.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 4vw;
  overflow: visible;
}

.submit-btn {
  background-color: #1277ff;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #000;
  .tips {
    position: absolute;
    $width: 120px;
    width: $width;
    top: -0.225 * $width * 0.9;
    height: 0.225 * $width;
    background: url(src/assets/images/home/btn-tips.png) no-repeat;
    background-size: 100% 100%;
  }
  .pointer {
    position: absolute;
    right: calc(0% - 8px);
    top: calc(50% + 1px);
    z-index: 1;

    img {
      position: relative;
      z-index: 1;
      animation: scale-anm 2s infinite;
    }
  }
}

@keyframes scale-anm {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>
